<template>    
    <div class="large-page">
        <div id="map"></div>
        <div id="notification"></div>
    </div>
</template>

<script>
export default {
    name:'MyGISMap',
    components: {
    },
    props: {
    //   mapCtrlTools:{
    //     type:Array,
    //     default:function () {
    //       return []
    //     }
    //   },
    },
    data () {
        return {
          /**地图各悬浮面板的可视状态**/
          lyrPanelVisible:true,  //默认true为隐藏
        }
    },
    methods:{
    //   togglePanel(attr,attr2){
    //     this[attr] = !this[attr];
    //     this[attr2] = !this[attr2];
    //   },

      mapOnLoad(){

             // init tiandi maps
            var vec = L.KqGIS.tiandituTileLayer({layerType: "vec"});
            var img = L.KqGIS.tiandituTileLayer({layerType: "img"});
            var ter = L.KqGIS.tiandituTileLayer({layerType: "ter"});
            var cva = L.KqGIS.tiandituTileLayer({layerType: "cva"});
            var eia = L.KqGIS.tiandituTileLayer({layerType: "eia"});

            var baseMaps = {
              "矢量图层": vec,
              "影像图层": img,
              "地形晕染图层": ter
            };

            var overlays = {
              "中文注记图层": cva,
              "英文注记图层": eia
            };
           
            var map = L.map('map', {                
                zoomControl: true,
                center: [34, 114],
                zoom: 7,
                attributionControl: false,
                layers: [vec, cva]
            });

            //添加常用底图图层切换按钮
            L.control.layers(baseMaps, overlays).addTo(map).setPosition("topleft");

            //L.KqGIS.tiandituTileLayer({ layerType: 'vec' }).addTo(map);
            //L.KqGIS.tiandituTileLayer({ layerType: 'cva' }).addTo(map);

            let jingjinUrl = 'http://support.kqgeo.com:29800/jingjin3857-proxy/kqgis/rest/services/jingjin3857/map';            
            // 加载jingjin地图
            L.KqGIS.tileMapLayer(jingjinUrl, {}).addTo(map);

            let CXLRFDB2007 = "http://gis24.jlu3s.com:8699/kqgis/rest/services/HeNan.2007CXLRFDB/map";
            L.KqGIS.tileMapLayer(CXLRFDB2007, {}).addTo(map);

            // 添加鹰眼控件
            var img = L.KqGIS.tiandituTileLayer({ layerType: "img", attribution: null });
            new L.Control.MiniMap(img).addTo(map);


            // 创建一个绘制图层
            var editableLayers = new L.FeatureGroup();
            map.addLayer(editableLayers);

            // 绘制控件参数配置
            var options = {
                position: 'topleft',
                draw: {
                    polyline: {}, // 线
                    polygon: {}, // 面
                    circle: {}, // 圆
                    rectangle: {}, // 矩形
                    marker: {}, // 标记点
                    circlemarker: {}
                },
                edit: {
                    featureGroup: editableLayers,
                    remove: true
                }
            };

            // 创建并添加绘制控件
            var drawControl = new L.Control.Draw(options);
            map.addControl(drawControl);

            // 监听绘制事件
            map.on(L.Draw.Event.CREATED, function (e) {
                var type = e.layerType, layer = e.layer;
                editableLayers.addLayer(layer);
            });

            /*--------------*/

            // 创建一个绘制图层
            var editableLayers = new L.FeatureGroup();
            map.addLayer(editableLayers);

            // 捕捉绘制控件参数设置
            var pm_options = {
                position: 'topright', // 控件位置
                drawMarker: true, // marker绘制是否可选
                drawPolygon: true, // drawPolygon绘制是否可选
                drawPolyline: true, // drawPolyline绘制是否可选
                editPolygon: true, // editPolygon编辑是否可选
                deleteLayer: true
            };

            // 添加捕捉绘制控件
            map.pm.addControls(pm_options);

           /*----------------*/

           let dataUrl = "http://gis24.jlu3s.com:8699/kqgis/rest/services/HeNan.2007ZLRF/data";
           L.Control.AttributeQuery = L.Control.extend({
            onAdd: function (map) {
              var control_html = L.DomUtil.create('div', 'attribute_query');
              var template = `<div id="maptools">
                              <div>
                                  <span>图层</span>
                                  <input  type="text" value="某图层" readonly>
                              </div>
                              <div>
                                  <span>查询条件</span>
                                  <input  type="text" value=" 'F1' like '%安阳%'" readonly>
                              </div>
                              <div>
                                  <span>查询结果</span>
                                  <textarea id="result" class="k-textbox" style="resize: none"></textarea>
                              </div>
                              <button id="query">属性查询</button>
                          </div>
                          `;
              setTimeout(function () {
                $('.attribute_query').append(template);
              });

              return control_html;
            }
        });
        L.control.attributeQuery = function (opts) {
          return new L.Control.AttributeQuery(opts);
        };
        L.control.attributeQuery({ position: 'topleft' }).addTo(map);
        
        setTimeout(function () {
          // 初始化kendo容器
          $('#query')
            .kendoButton({
              click: function () {
                let filter = new KqGIS.SQLFilterParams({ where: " 'F1' like '%安阳%' " });
                let params = new KqGIS.Data.GetFeaturesBySQLParams({
                  layerId: 1,
                  attributeFilter: filter,
                  // fromIndex: 1,
                  // toIndex: 2,
                  returnContent: true,
                  hasGeometry: true
                });
                L.KqGIS.dataFeatureService(dataUrl).getFeaturesBySQL(params, onsuccess, onfailed);
              }
            })
            .data('kendoButton');

          var notification = $('#notification')
            .kendoNotification({
              position: {
                pinned: true,
                bottom: 12,
                right: 12
              },
              autoHideAfter: 2000,
              stacking: 'up',
              templates: [
                {
                  type: 'info',
                  template: `<div>#= message #</div>`
                }
              ]
            })
            .data('kendoNotification');

          L.DomEvent.disableScrollPropagation($('#maptools')[0]).disableClickPropagation($('#maptools')[0]);

          var onsuccess = function (response) {
            $('#result').val(formatJson(response.result));
            //L.geoJSON(response.result.result.features).addTo(map);
            L.geoJSON(response.result.result.features,{
                //onEachFeature:onEachFeature,
                // style: {   
                //   "color": "#ff7800",
                //   "weight": 5,
                //   "opacity": 0.65
                // }
                style: function(feature){
                  return {
                    // color: feature.properties.color,
                    // stroke: feature.properties.stroke,
                    // weight: feature.properties.weight,
                    // opacity: feature.properties.opacity,
                    // fillColor: feature.properties.fillColor,
                    // fillOpacity: feature.properties.fillOpacity,
                    "color": "#ff7800",
                    "weight": 5,
                    "opacity": 0.65
                  }
                },


            }).addTo(map);
            notification.show({ message: '请求成功' }, 'info');
          };

          var onfailed = function () {
            notification.show({ message: '请求失败' }, 'info');
          };
        });


      }

    },
    created(){
      //region 地图左上角-功能启动图标按钮-初始化控制
    //   if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
    //     this.mapCtrlTools.forEach(item=>{
    //       if(item === 1){
    //         this.layerShow = true; //图层控制-功能启动图标按钮
    //       }else if(item === 2){
    //         this.measureShow = true; //测量工具-功能启动图标按钮
    //       }else if(item === 3){
    //         this.decorateShow = true; //地图整饰-功能启动图标按钮
    //       }
    //       else if(item === 4){
    //         this.attrQueryPanelShow = true; //属性查询-功能启动图标按钮
    //       }else if(item === 5){
    //         this.geometryQueryPanelShow = true; //几何空间查询-功能启动图标按钮
    //       }
    //       else if(item === 6){
    //         this.bufferAnalystPanelShow = true; //缓冲区分析-功能启动图标按钮
    //       }
    //       else if(item === 7){
    //         this.heatMapAnalystPanelShow = true; //热力图分析-功能启动图标按钮
    //       }
    //       else if(item === 8){
    //         this.clusterLayerPanelShow = true; //聚类图-功能启动图标按钮
    //       }   
    //     });
    //  }
    //endregion
    },
    mounted(){
      /*地图初始化*/
      //this.initMyMap();
      /*让地图中的某些面板可拖动*/
      //this.dragFunc(this.lyrBox);
      //this.dragFunc("sxcx"); //属性查询面板-可拖动
      //this.dragFunc("jhcx"); //几何分析面板-可拖动
      //this.dragFunc("hcqfx"); //缓冲区分析面板-可拖动
      //this.dragFunc("rlt"); //热力图面板-可拖动
      this.mapOnLoad();
    },
    watch:{},
    computed:{
    //   lyrBox: function () {
    //     return 'lyrBoxDiv' + new Date().valueOf()
    //   }
    }        
}      

</script>

<style scoped>
/* .login-main {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/login-bg.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
} */
 .large-page {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 #map {
    /* position: inherit; */
    /* width: calc( 100vw - 120px );
    height: calc( 100vh - 50px ); */
    width: 100%;
    height: 100%;
    background-color: rgb(40, 230, 230);
 }


 .attribute_query {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  color: white;
  opacity: 0.8;
  background-color: #0c0c0c;
  box-shadow: 2px 2px 2px #888888;
  border-radius: 5px;
  width: 300px;
  height: 335px;
}
#maptools {
  display: flex;
  flex-direction: column;
}
#maptools input {
  padding-left: 2px;
  color: white;
  background-color: #0c0c0c;
  border-radius: 4px;
  border: 1px solid white;
  width: 294px;
  height: 30px;
  line-height: 30px;
}
#maptools div:nth-of-type(1),
#maptools div:nth-of-type(2) {
  height: 70px;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#maptools div:nth-of-type(3) {
  height: 150px;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#maptools div:nth-of-type(1) > span:nth-of-type(1),
#maptools div:nth-of-type(2) > span:nth-of-type(1),
#maptools div:nth-of-type(3) > span:nth-of-type(1) {
  width: 100%;
  padding: 10px;
}

#result {
  width: 100%;
  height: 150px;
}
#result::-webkit-scrollbar {
  width: 5px;
}
#result::-webkit-scrollbar-track {
  display: none;
}
#result::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius: 2px;
}
#query {
  margin: 10px 0;
}
.k-notification-info {
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 8px 12px;
}

</style>
